// ui/components/WhiteboardPanel.js
export default {
  name: 'WhiteboardPanel',
  props: {
    whiteboardItems: {
      type: Array,
      default: () => []
    }
  },
  emits: ['whiteboard-updated', 'whiteboard-error'],
  setup(props, { emit }) {
    const { ref } = Vue; // Use global Vue

    const newFilePath = ref('');

    async function addFile() {
      if (!newFilePath.value.trim()) {
        console.warn('WhiteboardPanel: 文件路径不能为空');
        alert('文件路径不能为空！');
        return;
      }
      try {
        console.log('WhiteboardPanel.js: Entering addFile try block');
        if (!window.pywebview || !window.pywebview.api || typeof window.pywebview.api.add_whiteboard_item !== 'function') {
          console.error('WhiteboardPanel.js: pywebview.api.add_whiteboard_item is not available.');
          emit('whiteboard-error', '错误: 白板添加功能当前不可用。');
          return;
        }
        const response = await window.pywebview.api.add_whiteboard_item(newFilePath.value);
        console.log('WhiteboardPanel.js: Full API response from add_whiteboard_item:', response);
        console.log('WhiteboardPanel.js: Type of response.success:', typeof response.success, 'Value:', response.success);
        if (response.success) {
          newFilePath.value = '';
          console.log('WhiteboardPanel.js: Whiteboard item added, new list:', response.whiteboard_items);
          emit('whiteboard-updated', response.whiteboard_items);
        } else {
          const errorMsg = `添加文件失败: ${response.error || '未知错误'}`;
          console.error('WhiteboardPanel.js:', errorMsg);
          emit('whiteboard-error', errorMsg);
        }
      } catch (error) {
        const errorMsg = `添加文件时出错: ${error.message || String(error)}`;
        console.error('WhiteboardPanel.js: Entering addFile catch block. Error:', errorMsg);
        emit('whiteboard-error', errorMsg);
      }
    }

    async function removeFile(reference_id) {
      try {
        console.log('WhiteboardPanel.js: Entering removeFile try block for ID:', reference_id);
        if (!window.pywebview || !window.pywebview.api || typeof window.pywebview.api.remove_whiteboard_item !== 'function') {
          console.error('WhiteboardPanel.js: pywebview.api.remove_whiteboard_item is not available.');
          emit('whiteboard-error', '错误: 白板移除功能当前不可用。');
          return;
        }
        const response = await window.pywebview.api.remove_whiteboard_item(reference_id);
        console.log('WhiteboardPanel.js: Full API response from remove_whiteboard_item:', response);
        if (response.success) {
          console.log('WhiteboardPanel.js: Whiteboard item removed, new list:', response.whiteboard_items);
          emit('whiteboard-updated', response.whiteboard_items);
        } else {
          const errorMsg = `移除文件失败: ${response.error || '未知错误'}`;
          console.error('WhiteboardPanel.js:', errorMsg);
          emit('whiteboard-error', errorMsg);
        }
      } catch (error) {
        const errorMsg = `移除文件时出错: ${error.message || String(error)}`;
        console.error('WhiteboardPanel.js: Entering removeFile catch block. Error:', errorMsg);
        emit('whiteboard-error', errorMsg);
      }
    }

    return {
      newFilePath,
      addFile,
      removeFile,
      // props.whiteboardItems is automatically available to the template
    };
  },
  template: `
  <div class="whiteboard-panel">
    <h4>白板</h4>
    <div class="add-item-section">
      <input type="text" v-model="newFilePath" placeholder="输入文件路径..." />
      <button @click="addFile">添加</button>
    </div>
    <ul v-if="whiteboardItems && whiteboardItems.length > 0" class="item-list">
      <li v-for="item in whiteboardItems" :key="item.reference_id" class="whiteboard-item">
        <span>{{ item.display_name || item.full_local_path }}</span>
        <button @click="removeFile(item.reference_id)" class="remove-btn">移除</button>
      </li>
    </ul>
    <div v-else class="whiteboard-empty-message">
      <p>白板当前为空。</p>
    </div>
  </div>
  `
};